<template>
    <div id="centerTop" class="flex_center">
      <div :class="['bar_item', item.id === select ? 'select' : '']" v-for="(item,index) in barList" @click="onClick(item.id)" :key="index">
        {{item.t}}
      </div>
    </div>
</template>

<script>
export default {
  name: '',
  props:{
    select:{}
  },
  created() {
  },
  mounted() {
  },
  data() {
    return {
      barList:[
        {
          t:'总体',
          id:1,
        },{
          t:'打击',
          id:2,
        },{
          t:'防范',
          id:3,
        },{
          t:'管理',
          id:4,
        },{
          t:'控制',
          id:5,
        },{
          t:'建设',
          id:6,
        },
      ],
    }
  },
  methods: {
    onClick(v){
      this.$emit('onClick',v)
    }
  }
}
</script>
<style scoped lang="scss">
$font-family: PingFang SC, PingFang SC, sans-serif;
$height:48px;
#centerTop {
  z-index: 2;
  width: 778px;
  height: $height;
  background-image: url("@/assets/img/center_top_bg.png");
  background-size: cover;
  background-position: center center;
  justify-content: center;
  .bar_item {
    width: 88px;
    height: $height;
    line-height: $height;
    text-align: center;
    font-family: $font-family;
    font-weight: 600;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    user-select: none;
    cursor: pointer;
    transition: all .3s ease-in-out; /* 设置1秒的过渡效果，使进度条平滑展开 */

    &.select{
      color: white;
      background-image: url("@/assets/img/center_top_light.png");
      background-size: 100% ;
      background-position: bottom center;
    }
  }
}


</style>
